<script setup lang="ts">
// 获取屏幕边界到安全区域距离
import { ref } from 'vue'
import spaceCom from './components/spaceCom.vue'

const tabs = [
  { name: '空间', num: 3 },
  { name: '分类', num: 9 },
]

const currentIndex = ref(0)
// 滚动位置
const scrollTop = ref(0)
let isShow = ref(false)
const opacity = ref(0)

const switchTab = (index: number) => {
  currentIndex.value = index
}
const { safeAreaInsets } = uni.getSystemInfoSync()

// 监听页面滚动
const onPageScroll = (e: any) => {
  scrollTop.value = e.detail.scrollTop
  opacity.value = Math.min(scrollTop.value / 100, 1)
  console.log('已触顶' + scrollTop.value)
  if (scrollTop.value <= 2) {
    isShow.value = false
  } else {
    isShow.value = true
  }
  console.log('滚动位置:', scrollTop.value)
}

const sortFn = (index: number) => {
  // 处理物品分类点击事件
  console.log('点击了物品分类', index)
  uni.navigateTo({
    url: `/pages/index/sort`,
  })
}
</script>

<template>
  <!-- 吸顶内容 -->
  <view
    class="fixed"
    :style="{ paddingTop: (safeAreaInsets?.top ?? 0) + 10 + 'px', opacity: opacity }"
    v-show="isShow"
  >
    <text class="header-title">小仙女的家</text>
    <image class="header-select" src="@/static/images/select_icon.png"></image>

    <view class="input">
      <image src="@/static/images/select.png" mode="scaleToFill" />
      <input class="uni-input" focus placeholder="输入物品名称搜索" type="text" />
      <image src="@/static/images/scan.png" mode="scaleToFill" />
    </view>
  </view>

  <scroll-view scroll-y @scroll="onPageScroll" style="height: 100vh; overflow: hidden">
    <image class="background" src="@/static/images/background_icon.png"></image>
    <view class="navbar" :style="{ paddingTop: (safeAreaInsets?.top ?? 0) + 10 + 'px' }">
      <text class="header-title">小仙女的家</text>
      <image class="header-select" src="@/static/images/select_icon.png"></image>

      <!-- 输入框 -->
      <view class="input">
        <image src="@/static/images/select.png" mode="scaleToFill" />
        <input class="uni-input" focus placeholder="输入物品名称搜索" type="text" />
        <image src="@/static/images/scan.png" mode="scaleToFill" />
      </view>
      <!-- 物品分类 -->
      <view class="header-them">
        <view class="content" @click="sortFn(0)">
          <image class="background-them" src="@/static/images/linqi_icon.png" />
          <text class="them-title">临期物品</text>
          <view>
            <text class="them-num">10</text>
          </view>
        </view>

        <view class="content" @click="sortFn(1)">
          <image class="background-them" src="@/static/images/guoqi_icon.png" />
          <text class="them-title">过期物品</text>
          <view>
            <text class="them-num">10</text>
          </view>
        </view>

        <view class="content" @click="sortFn(2)">
          <image class="background-them" src="@/static/images/kucun_icon.png" />
          <text class="them-title">库存不足</text>
          <view>
            <text class="them-num">10</text>
          </view>
        </view>
      </view>

      <!-- 导航内容 -->
      <view class="header-nav">
        <view class="con">
          <image class="nav-img" src="@/static/images/cunfang_icon.png"></image>
          <text class="nav-titele">存放空间</text>
        </view>

        <view class="con">
          <image class="nav-img" src="@/static/images/fam_icon.png"></image>
          <text class="nav-titele">家庭管理</text>
        </view>

        <view class="con">
          <image class="nav-img" src="@/static/images/pro_icon.png"></image>
          <text class="nav-titele">物品管理</text>
        </view>

        <view class="con">
          <image class="nav-img" src="@/static/images/day_icon.png"></image>
          <text class="nav-titele">物品日记</text>
        </view>
      </view>

      <!-- tab栏 -->
      <view class="tab-container">
        <view class="tab-header">
          <view class="tab-item">
            <view
              class="tab-text"
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{ active: currentIndex === index }"
              @click="switchTab(index)"
            >
              {{ tab.name }}({{ tab.num }})
            </view>
          </view>
          <img class="tab-edit" src="@/static/images/edit_icon.png" alt="" />
        </view>
        <view class="tab-content">
          <view v-if="currentIndex === 0" class="tab-pane">
            <spaceCom />
          </view>
          <view v-if="currentIndex === 1" class="tab-pane">
            <spaceCom />
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
/* 自定义导航条 */
page {
  background-color: #f3f6fb;
}
.background {
  width: 600rpx;
  height: 800rpx;
  position: absolute;
  z-index: -1;
}
.fixed {
  width: 100%;
  // height: 300rpx;
  position: fixed;
  z-index: 11;
  background-color: #f3f6fb;
  .header-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 40rpx;
    margin-left: 30rpx;
    color: #333333;
  }
  .header-select {
    width: 20rpx;
    height: 12rpx;
    margin-left: 20rpx;
  }

  .input {
    width: 700rpx;
    height: 80rpx;
    background-color: white;
    margin: 0 auto;
    border-radius: 20rpx;
    padding-right: 30rpx;
    padding-left: 30rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30rpx;

    .uni-input {
      width: 100%;
      height: 80rpx;
      font-size: 14px;
      margin-left: 30rpx;
    }
    image {
      width: 36rpx;
      height: 36rpx;
    }
  }
}
.navbar {
  // padding-top: 20px;
  // height: 635rpx;

  // width: 100%;
  // height: 100%;
  .header-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 40rpx;
    margin-left: 30rpx;
    color: #333333;
  }
  .header-select {
    width: 20rpx;
    height: 12rpx;
    margin-left: 20rpx;
  }

  .input {
    width: 700rpx;
    height: 80rpx;
    background-color: white;
    margin: 0 auto;
    border-radius: 20rpx;
    padding-right: 30rpx;
    padding-left: 30rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30rpx;

    .uni-input {
      width: 100%;
      height: 80rpx;
      font-size: 14px;
      margin-left: 30rpx;
    }
    image {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .header-them {
    width: 95%;
    justify-content: space-around;
    display: flex;
    margin: 30rpx auto;
    .content {
      width: 216rpx;
      height: 152rpx;
      background-color: white;
      border-radius: 20rpx;

      .them-title {
        font-weight: 400;
        font-size: 26rpx;
        margin: 20rpx;
        position: relative;
        top: 10rpx;
      }
      .them-num {
        font-weight: 500;
        font-size: 52rpx;
        line-height: 60rpx;
        margin: 20rpx;
        position: relative;
        top: 28rpx;
      }

      .background-them {
        position: absolute;
        width: 216rpx;
        height: 152rpx;
      }
    }
  }
  .header-nav {
    width: 95%;
    justify-content: space-around;
    display: flex;
    margin: 30rpx auto;
    .con {
      display: flex;
      flex-direction: column;
      .nav-img {
        width: 120rpx;
        height: 120rpx;
      }
      .nav-titele {
        font-weight: 400;
        font-size: 28rpx;
        line-height: 100%;
        margin-top: 16rpx;
        text-align: center;
      }
    }
  }

  .tab-container {
    width: 95%;
    margin: 0 auto;
    .tab-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .tab-item {
        display: flex;

        .tab-text {
          padding: 20rpx 30rpx;
          font-size: 32rpx;
          color: #666;
          &.active {
            font-weight: bold;
            color: #222;
          }
        }
      }

      .tab-edit {
        width: 44rpx;
        height: 44rpx;
        margin: 20rpx;
      }
    }
    .tab-content {
      padding: 20px;
      width: 95%;
      height: 1100rpx;
      background-color: white;
      margin: 0 auto;
      border-radius: 20rpx;

      // .tab-pane {
      // }
    }
  }
}
</style>
